<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <link rel="stylesheet" type="text/css" href="css/index.css"/>
	    <script type="text/javascript" src="js/jquery.1.9.1.js" ></script>
	    <script type="text/javascript" src="js/mobileSelect.js"></script>
		<link rel="stylesheet" type="text/css" href="css/mobileSelect.css"/>
	    <script type="text/javascript" src="js/rem.js" ></script>
	    <script type="text/javascript" src="js/mescroll.min.js" ></script>
		<link rel="stylesheet" type="text/css" href="css/mescroll.min.css"/>
		<script type="text/javascript" src="js/jquery.slimscroll.min.js" ></script>
		<title>现金日记账</title>
	</head>
	<style>
		.slimScrollDiv{
			width: 100%!important;
			display: none;
			top: 0.89rem!important;
		}
		.company{width: 100%!important;}
	</style>
	<body>
		<div class="top">
			<div class="top_left">
				<span class="top_left_con1">
					<div id="trigger4" class="trigger4" style="display: inline-block;font-size: 0.28rem;color: #555;">
						开会周次
					</div>
				</span>
				<img class="top_left_xia1" src="img/jtxia.png" />
				<img class="top_left_up1" src="img/jtup.png" />
			</div>
			<div class="top_right">
				<span class="top_left_con2">分公司</span>
				<img class="top_left_xia2" src="img/jtxia.png" />
				<img class="top_left_up2" src="img/jtup.png" />
			</div>
		</div>
		<ul class="company">
			<li style="color: #457bc7;">全部<img src="img/jtyou.png" /></li>
			<li>北京分公司<img src="img/jtyou.png" /></li>
			<li>上海分公司<img src="img/jtyou.png" /></li>
			<li>上海分公司<img src="img/jtyou.png" /></li>
			<li>上海分公司<img src="img/jtyou.png" /></li>
			<li>上海分公司<img src="img/jtyou.png" /></li>
			<li>上海分公司<img src="img/jtyou.png" /></li>
			<li>上海分公司<img src="img/jtyou.png" /></li>
			<li>上海分公司<img src="img/jtyou.png" /></li>
			<li>上海分公司<img src="img/jtyou.png" /></li>
			<li>上海分公司<img src="img/jtyou.png" /></li>
			<li>上海分公司<img src="img/jtyou.png" /></li>
			<li>上海分公司<img src="img/jtyou.png" /></li>
			<li>上海分公司<img src="img/jtyou.png" /></li>
			<li>上海分公司<img src="img/jtyou.png" /></li>
			<li>上海分公司<img src="img/jtyou.png" /></li>
			<li>上海分公司<img src="img/jtyou.png" /></li>
			<li>end<img src="img/jtyou.png" /></li>
		</ul>
		<div id="mescroll" class="mescroll">
			<ul class="list">
		       <li>
		        		<a href="list.html">
		        			<p class="number">北京分公司
		        				<span class="num_right">43周 11.04-12.40</span>
		        			</p>
			            <div class="info_left">
			            		<p>收入</p>
			            		<p>100510.00</p>
			            </div>
			            <div class="info_right">
			            		<p>支出</p>
			            		<p>100510.00</p>
			            </div>
		            </a>
		       </li>
		       <li>
		        		<a href="list.html">
		        			<p class="number">北京分公司
		        				<span class="num_right">43周 11.04-12.40</span>
		        			</p>
			            <div class="info_left">
			            		<p>收入</p>
			            		<p>100510.00</p>
			            </div>
			            <div class="info_right">
			            		<p>支出</p>
			            		<p>100510.00</p>
			            </div>
		            </a>
		       </li>
		    </ul>
		</div>
		<a href="add.html"><div class="pay">新增</div></a>
	</body>
	<script>
		$(function(){
			var winHeight = $(window).height();
			var topHeight = $('.top').height();
			var topPadding = parseFloat($('.top').css('padding-top'))*2;
			var conHeight = winHeight-topHeight-topPadding;
			$('.company').css('height',conHeight-1+'px');
			$('.company').slimScroll({ height: conHeight-1+'px' });
			$('.top_right').click(function(){
				$('.company').toggle();
				$('.top_left_xia2').toggle();
				$('.top_left_up2').toggle();
				$('.top_left_con2').css('color','#000');
				$('.slimScrollDiv').show();
			});
			$('.company li').click(function(){
				$('.top_left_xia2').show();
				$('.top_left_up2').hide();
				$(this).css('color','#457bc7').siblings().css('color','#000');
				$('.company').hide();
				var CompanyName = $(this).text();
				$('.top_left_con2').text(CompanyName);
				$('.top_left_con2').css('color','#555');
			});
		});
	</script>

<script>
  var param = window.location.search;
  var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id
    //如果下拉刷新是重置列表数据,那么down完全可以不用配置
    down: {
      callback: downCallback //下拉刷新的回调
    },
    up: {
      auto:false,//在初始化完毕之后自动执行下拉刷新的回调  true  false
      htmlNodata: '<p class="upwarp-nodata">没有更多了..</p>',
      page: {
        num: 0,
        size: 10,
        time: null
      },
      callback: upCallback    //上拉加载的回调
    }
  });

  var pageSize = 10;
  function downCallback(page) {
    $.ajax({
      url: '',
      type: 'get',
      data:{},
      success: function (res) {
        mescroll.resetUpScroll();
      },
      error: function () {
        // 联网失败的回调,隐藏下拉刷新的状态
        mescroll.endErr();
      }

    })
  }

  function upCallback(page) {
    $.ajax({
      url: '',
      type: 'get',
      success: function (res) {
        var list = res.rows.data;
        if(list.length > 0) { //有数据
          $('.list').append(render(list));
        }
        if (res.rows.data && res.rows.data.length == page.size) {
          //联网成功的回调,隐藏下拉刷新的状态（参数：当前页的数据个数, 是否有下一页true/false）;
          mescroll.endSuccess(res.rows.data.length, true);
        } else {
          //联网成功的回调,隐藏下拉刷新的状态（参数：当前页的数据个数, 是否有下一页true/false）;
          mescroll.endSuccess(res.rows.data.length, false);
        }
      },
      error: function () {
        // 联网失败的回调,隐藏下拉刷新的状态
        mescroll.endErr();
      }
    })
  }
  function render(data)
  {
    var html ='';
    $.each(data,function (index,value) {
      console.log(value);
      html +='<li><a href="list.html"><p class="number">'+value.title
      	+'<span class="num_right">'+value.datetime
      	+'</span></p><div class="info_left"><p>收入</p><p>'+value.shou
      	+'</p></div><div class="info_right"><p>支出</p><p>'+value.chu
      	+'</p></div></a></li>';
    });
    return html;
  }
</script>
<script>
	var mobileSelect4 = new MobileSelect({
	    trigger: '#trigger4',
	    title: '周次选择',
	    wheels: [{data:[
	    					{
                            id:'1',
                            value:'',
                            childs:[
                                {id:'A1',value:''},
                            ]
                        }
	    			]}],
		 transitionEnd:function(indexArr, data){
		        
		 },
		 callback:function(indexArr, data){
		 	var strs = data[1].name.split(",");
		 	$('#trigger4').text(strs[0]);
		    $('#week').val(data[1].value);
		 }
	});
	var arr = [];
  	$.ajax({
	  url: 'https://oa.fc62.com/api/ajax/year?num=5',
	  type: 'get',
	  success: function (year) {
	  		$.each(year.data,function (index,value) {
	  			 arr[index] = value;
	  			$.get('https://oa.fc62.com/api/ajax/year?year='+value.value,function (week) {
						arr[index]['childs'] = week.data;
					});

		   });
//		   console.log(arr);
		   mobileSelect4.updateWheels(arr);
	  }
	});
</script>
</html>
